<!--
 * @Author: @yzcheng
 * @Date: 2021-03-02 11:11:47
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-03-27 11:30:01
-->
<template>
  <div class="task_details">
    <div class="task_header">
      <div>
        <i class="el-icon-edit-outline"></i
        >{{
          $t("flowTask.taskHandle", [$t("flowTask.taskHandleStatus.debugging")])
        }}
      </div>
    </div>
    <div class="task_content">
      <el-form ref="form" size="small" label-width="80px" :rules="rules">
        <el-row gutter="30">
          <el-col :xl="22">
            <el-form-item
              label-width="20%"
              :label="$t('flowTask.detailsForm.currentLink')"
            >
              {{ processInfo.name }}
            </el-form-item>
          </el-col>
          <!-- <el-col :xl="22">
            <el-form-item
              label-width="20%"
              :label="$t('flowTask.detailsForm.flowVariable')"
            >
              <Table />
            </el-form-item>
          </el-col> -->
          <el-col :xl="22">
            <el-form-item
              prop="flowName"
              label-width="20%"
              :label="$t('flowTask.detailsForm.opinion')"
            >
              <el-input
                v-model="processInfo.comment"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="24">
            <div class="task_form_header">
              <div>
                {{ $t("flowTask.nextFlowInfo") }}
              </div>
            </div>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.requiredCompletionTime')"
            >
              <el-date-picker
                v-model="processInfo.dueDate"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xl="11">
            <el-form-item
              label-width="40%"
              :label="$t('flowTask.detailsForm.taskPriority')"
            >
              <el-select
                v-model="processInfo.priority"
                :placeholder="$t('flowDefine.placeholder.flowStatus')"
              >
                <el-option label="" value=""></el-option>
                <el-option label="一般" :value="25"
                  ><span style="color: #67c23a">一般</span></el-option
                >
                <el-option label="重要" :value="50"
                  ><span style="color: #e6a23c">重要</span></el-option
                >
                <el-option label="紧急" :value="100"
                  ><span style="color: #f56c6c">紧急</span></el-option
                >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="22">
            <el-form-item
              label-width="19.5%"
              :label="$t('flowTask.detailsForm.nextProcessor')"
            >
              <el-input
                @click="dialogUser = !dialogUser"
                readonly
                v-model="processInfo.userCode"
                :placeholder="
                  $t('validate.pleaseFillIn', [
                    $t('flowTask.detailsForm.nextProcessor'),
                  ])
                "
              >
                <template #suffix>
                  <i class="el-icon-search el-input__icon"> </i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="24" :offset="4">
            <el-form-item :label-width="'0px'">
              <el-button @click="submit(1)" type="primary">{{
                $t("button.submit")
              }}</el-button>
              <el-button @click="onDialog(2)" type="danger">{{
                $t("button.back")
              }}</el-button>
              <el-button @click="onDialog(3)" type="warning">{{
                $t("button.complaint")
              }}</el-button>
              <el-button @click="onDialog(4)" type="success">{{
                $t("button.entrust")
              }}</el-button>
              <el-button @click="onDialog(5)" type="danger">{{
                $t("button.termination")
              }}</el-button>
              <el-button @click="onDialog(6)" type="primary">{{
                $t("button.freeJump")
              }}</el-button>
              <el-button @click="onDialog(7)" type="primary">{{
                $t("flowTask.undo")
              }}</el-button>
              <el-button @click="onDialog(8)" type="primary">{{
                $t("flowTask.again")
              }}</el-button>
              <el-button @click="showView(processInfo)" type="primary">{{
                $t("button.flowTracking")
              }}</el-button>
              <el-button @click="changeKey">{{ $t("common.close") }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <User @ok="ok" v-model:visible="dialogUser" />
    <Complaint @submit="submit" :info="info" v-model:visible="visible" />
    <JumpFlow
      v-if="jumpFreedomInfo.visible"
      v-model:visible="jumpFreedomInfo.visible"
      :proInsId="jumpFreedomInfo.proInsId"
      :procDefId="jumpFreedomInfo.procDefId"
    />
    <!-- :updateData="updateData" -->
  </div>
</template>
<script>
import JumpFlow from "@/components/JumpFlow";
import User from "@/views/process/components/userInfo/user.vue";
import Complaint from "./components/complaint.vue";
import { mapState, mapMutations, mapActions } from "vuex";
// import Table from "./components/table.vue";
export default {
  data() {
    return {
      dialogSelect: false,
      dialogUser: false,
      dialogStop: false,
      jumpFreedomInfo: { visible: false, procDefId: null, procInsId: null },
      treeData: [],
      form: {},
      visible: false,
      info: {},
    };
  },
  inject: ["showView"],
  components: {
    // Table,
    JumpFlow,
    User,
    Complaint,
  },
  computed: {
    ...mapState("flowTaskStore", ["comment", "userCode", "processInfo"]),
  },

  methods: {
    ...mapMutations("flowTaskStore", ["changeKey"]),
    ...mapActions("flowTaskStore", ["selectSub"]),
    async submit(type) {
      await this.selectSub(type);
      this.visible = false;
      this.changeKey();
    },
    /**
     *  终止原因
     *
     * @export
     * @return {*}
     */
    // stop() {},
    onDialog(type) {
      this.info = {
        type,
      };
      switch (type) {
        case 2:
          this.visible = true;
          this.info.title = this.$t("flowTask.back");
          break;
        case 3:
          this.visible = true;
          this.info.title = this.$t("flowTask.complaint");
          break;
        case 4:
          this.visible = true;
          this.info.title = this.$t("flowTask.entrust");
          break;
        case 5:
          this.visible = true;
          this.info.title = this.$t("flowTask.stop");
          break;
        case 6:
          this.info.title = this.$t("flowTask.jump");
          this.jumpFreedomInfo.visible = true;
          this.jumpFreedomInfo.procDefId = this.processInfo.processDefinitionId;
          this.jumpFreedomInfo.proInsId = this.processInfo.processInstanceId;
          break;
        case 7:
           this.visible = true;
          this.info.title = this.$t("flowTask.undo");
          break;
        case 8:
            this.visible = true;
          this.info.title = this.$t("flowTask.again");
          break;

        default:
          break;
      }
    },
    ok(item) {
      this.processInfo.userCode = item[0].name;
    },
  },
};
</script>
<style lang='scss' scoped>
.task_details {
  height: calc(100% - 54px);
  .task_header {
    border-bottom: 1px solid #eee;
    height: 40px;
    width: 100%;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    & i {
      color: #3e70dd;
      padding: 0 5px;
    }
  }
  .task_form_header {
    border-bottom: 1px solid #eee;
    height: 30px;
    width: 100%;
    line-height: 30px;
    color: #3065db;
    margin-bottom: 20px;
  }
  .task_content {
    height: calc(100% - 40px);
    width: 100%;
    padding: 10px;
  }
}
</style>